<template>
  <div class="flowpath-container">
    <div>
      <div class="mb20">
        <span class="color_494949 ft12 pr5">{{ translate('公司名称') }}：</span>
        <el-select
          v-model="formInfo.CompanyId"
          class="w164 mr14"
          :clearable="true"
          placeholder="Select"
        >
          <el-option
            v-for="item in Companylist"
            :key="item.CompanyId"
            :label="item.FullName"
            :value="item.CompanyId"
          />
        </el-select>
        <span class="color_494949 ft12 pr5">{{ translate('出库状态') }}：</span>
        <el-select
          v-model="formInfo.StockStatus"
          class="w164 mr14"
          :clearable="true"
          placeholder="Select"
        >
          <el-option
            v-for="item in StockData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <span class="color_494949 ft12 pr5">{{ translate('基站编码') }}：</span>
        <ElInput
          v-model="formInfo.BSID"
          class="w164 mr14"
          placeholder="请输入基站编码"
        />
        <span class="color_494949 ft12 pr5">{{ translate('基站名称') }}：</span>
        <ElInput
          v-model="formInfo.BSName"
          class="w164 mr14"
          :placeholder="translate('请输入基站名称')"
        />
        <el-button class="settingBtn mr10" type="primary" @click="getList">
          {{ translate('查询') }}
        </el-button>
      </div>
      <div class="pdb10">
        <el-button class="settingBtn mr10" type="primary" @click="addFn" plain>
          {{ translate('新增') }}
        </el-button>
        <el-button class="settingBtn mr10" type="primary" @click="exportFn()" plain>
          {{ translate('出库') }}
        </el-button>
      </div>
      <el-table :data="tableData" @selection-change="handleSelectionChange">
        <el-table-column prop="value" type="selection" width="55" />
        <!-- <el-table-column label="编号" prop="ID" show-overflow-tooltip /> -->
        <el-table-column
          :label="translate('基站编码')"
          prop="BSID"
          show-overflow-tooltip
        />
        <el-table-column
          :label="translate('基站名称')"
          prop="BSName"
          show-overflow-tooltip
        />
        <el-table-column
          :label="translate('密钥')"
          prop="Code"
          show-overflow-tooltip
        />
        <el-table-column
          :label="translate('版本号')"
          prop="Version"
          show-overflow-tooltip
        />
        <!-- <el-table-column
          :label="translate('备注')"
          prop="Remark"
          show-overflow-tooltip
        /> -->
        <!-- <el-table-column
          :label="translate('状态')"
          prop="Status"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            <div>
              {{ row.Status === 1 ? translate('正常') : translate('禁用') }}
            </div>
          </template>
        </el-table-column> -->
        <el-table-column
          :label="translate('出库时间')"
          prop="OutStockDate"
          show-overflow-tooltip
        />
        <el-table-column
          :label="translate('出库状态')"
          prop="StockStatus"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            <div>
              {{
                row.StockStatus === 0
                  ? translate('未出库')
                  : row.StockStatus === 1
                  ? translate('已出库')
                  : translate('其他')
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :label="translate('所属公司')"
          prop="CompanyName"
          show-overflow-tooltip
        />
        <!-- <el-table-column
          :label="translate('创建时间')"
          prop="CreateDate"
          show-overflow-tooltip
        /> -->
        <el-table-column :label="translate('连接状态')">
          <template #default="{ row }">
            <div :class="row.Code == '0' ? 'color_l' : 'color_red'">
              <vab-icon :icon="row.Code == '0' ? 'link-m' : 'link-unlink-m'" />
              {{ row.Code == '0' ? translate('已连接') : translate('未连接') }}
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="translate('操作')" width="250">
          <template #default="{ row }">
            <el-button
              v-if="MenuAuths('edit')"
              plain
              size="small"
              type="primary"
              @click="detailFn(row)"
            >
              {{ translate('修改') }}
            </el-button>
            <el-button plain size="small" type="danger" @click="unbingbsFn(row)">
              {{ translate('退库') }}
            </el-button>
            <!-- <el-button
              v-if="MenuAuths('delete')"
              link
              size="small"
              type="danger"
              @click="deletedFn(row)"
            >
              删除
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div v-if="total > 0" class="pagination">
        <ElPagination
          background
          :current-page="pageNo"
          :layout="layout"
          :page-size="pageSize"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
    <el-dialog
      v-model="dialogVisible"
      :title="title"
      :width="widthdialog"
      @close="closeFn"
    >
      <detail v-if="detailType === 1" :form="form" :isedit="isedit" />
      <exportdetail
        v-if="detailType === 2"
        :companydata="Companylist"
        :form="exportform"
      />
      <template #footer>
        <el-button @click="dialogVisible = false">
          {{ translate('取消') }}
        </el-button>
        <el-button type="primary" @click="submit">
          {{ translate('确认') }}
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  import {
    BaseStationStockData,
    bsstockedit,
    outputbs,
    CompanyData,
    getbss,
    unbingbs,
  } from '@/api/eslstock'
  import detail from './components/detail'
  import exportdetail from './components/exportdetail'
  import { MenuAuth } from '~/src/utils/permission'
  import { translate } from '@/i18n'
  export default defineComponent({
    name: 'Arrival',
    components: { detail, exportdetail },
    data() {
      return {
        tableData: [],
        searchInfo: '',
        total: 0,
        pageNo: 1,
        pageSize: 20,
        dialogVisible: false,
        layout: 'total, sizes, prev, pager, next, jumper',
        detailType: 1, // 1新增、编辑 2 出库
        widthdialog: '600px',
        title: translate('ESL库存'),
        isedit: false,
        Companylist: [],
        BaseStockData: [],
        ItemList: [],
        exportform: {
          comid: '',
          deptid: '',
        },
        form: {
          bsid: '',
          bsName: '',
          version: '',
          remark: '',
          status: '',
          code: '',
          bsidarr: [
            { pinless: '' },
            { pinless: '' },
            { pinless: '' },
            { pinless: '' },
            { pinless: '' },
            { pinless: '' },
          ],
        },
        formInfo: {
          CompanyId: '',
          BSID: '',
          StockStatus: -1,
          BSName: '',
        },
        StockData: [
          {
            label: translate('全部'),
            value: -1,
          },
          {
            label: translate('未出库'),
            value: 0,
          },
          {
            label: translate('已出库'),
            value: 1,
          },
        ],
        translate: translate,
      }
    },
    created() {
      this.MenuAuths = MenuAuth
      this.getList()
      this.CompanyData()
    },
    methods: {
      //分页条数切换
      handleSizeChange(val) {
        this.pageSize = val
        this.getList()
      },
      //分页切换
      handleCurrentChange(val) {
        this.pageNo = val
        this.getList()
      },
      handleSelectionChange(e) {
        this.ItemList = e
      },
      async addFn() {
        this.widthdialog = '600px'
        this.title = translate('新增')
        this.detailType = 1
        this.isedit = false
        this.form = {
          bsid: '',
          bsName: '',
          version: '',
          remark: '',
          status: '',
          code: '',
          bsidarr: [
            { pinless: '' },
            { pinless: '' },
            { pinless: '' },
            { pinless: '' },
            { pinless: '' },
            { pinless: '' },
          ],
        }
        console.log(this.form)
        this.dialogVisible = true
      },
      detailFn(row) {
        this.isedit = true
        this.widthdialog = '600px'
        this.title = translate('编辑')
        this.getbss(row.ID)
      },
      exportFn() {
        if (this.ItemList.length <= 0) {
          this.$message({
            message: translate('请选择基站库存数据'),
            type: 'warning',
          })
          return
        }
        this.title = translate('基站批量出库')
        this.detailType = 2
        this.dialogVisible = true
      },
      async getbss(id) {
        const params = {
          id: id,
        }
        const data = await getbss(params)
        if (data.code === '200') {
          this.form = data.data.data
          // this.form.bsidarr = []
          // let bsidArr = []
          // if (this.form) {
          //   bsidArr = this.form.bsid.split(':')
          // }
          // if (bsidArr.length > 0) {
          //   bsidArr.map((item) => {
          //     this.form.bsidarr.push({
          //       pinless: item,
          //     })
          //   })
          // }
          console.log(this.form)
          this.dialogVisible = true
        }
      },
      async getList() {
        const params = {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          tableName: '',
          sort: '',
          order: '',
          wheres: JSON.stringify([
            {
              name: 'CompanyId',
              value: this.formInfo.CompanyId,
              displayType: 'like',
            },
            {
              name: 'StockStatus',
              value:
                this.formInfo.StockStatus === -1
                  ? ''
                  : this.formInfo.StockStatus,
              displayType: 'equal',
            },
            {
              name: 'BSID',
              value: this.formInfo.BSID,
              displayType: 'like',
            },
            {
              name: 'BSName',
              value: this.formInfo.BSName,
              displayType: 'like',
            },
          ]),
          export: false,
          value: '',
        }
        const data = await BaseStationStockData(params)
        this.tableData = data?.data?.rows
        this.total = data?.data?.total
        console.log(this.tableData)
      },
      async CompanyData() {
        const params = {
          pageNo: 0,
          pageSize: 0,
          total: 0,
          tableName: '',
          sort: '',
          order: '',
          wheres: '',
          export: true,
          value: '',
        }
        const data = await CompanyData(params)
        if (data.code === '200') {
          console.log(data)
          this.Companylist = data.data.rows
        }
      },
      async unbingbsFn(row) {
        const params = {
          id: row.ID,
          bsid: row.BSID,
        }
        const data = await unbingbs(params)
        if (data.code === '200') {
          this.getList()
          this.$message({
            type: 'success',
            message: data.message,
          })
        }
      },
      async submit() {
        if (this.detailType === 1) {
          await this.bsstockedit()
          this.dialogVisible = false
        } else if (this.detailType === 2) {
          this.outputbs()
        }
      },
      async outputbs() {
        const ESLarr = []
        if (this.ItemList && this.ItemList.length > 0) {
          this.ItemList.map((item) => {
            ESLarr.push(item.BSID)
          })
        }
        const params = {
          bslist: ESLarr.join(','),
          comid: this.exportform.comid,
          deptid: this.exportform.deptid,
        }
        const data = await outputbs(params)
        if (data.code === '200') {
          this.getList()
          this.$message({
            type: 'success',
            message: translate('保存成功'),
          })
        }
        this.dialogVisible = false
      },
      async bsstockedit() {
        // const bsidList = []
        // this.form.bsidarr.map((item) => {
        //   if (item.pinless) {
        //     bsidList.push(item.pinless)
        //   }
        // })
        // if (bsidList.length === 6) {
        //   this.form.bsid = bsidList.join(':')
        // } else {
        //   this.$message({
        //     type: 'error',
        //     message: translate('请填写正确的基站编码'),
        //   })
        //   return
        // }
        const params = {
          id: this.form.id ? this.form.id : 0,
          bsid: this.form.bsid,
          bsName: this.form.bsName,
          version: this.form.version,
          status: this.form.status,
          remark: this.form.remark,
          Code: this.form.code
        }
        const data = await bsstockedit(params)
        if (data.code === '200') {
          this.getList()
          this.$message({
            type: 'success',
            message: translate('保存成功'),
          })
        }
      },
    },
  })
</script>
<style lang="scss" scoped>
  .flowpath-container {
    .color_494949 {
      color: #494949;
    }
    .color_l {
      color: #42d885;
    }
    .color_red {
      color: red;
    }

    .w164 {
      width: 164px;
    }

    .mb20 {
      margin-bottom: 20px;
    }

    .mr14 {
      margin-right: 14px;
    }
    .add-box {
      display: inline-block;
      // width: 100px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border: 1px solid #999;
      border-radius: 3px;
      cursor: pointer;
      padding: 0 10px;
    }
    // .add-box3 {
    //   width: 60px;
    // }
    .pdb10 {
      padding-bottom: 10px;
    }
  }
</style>
